<!-- 盲盒 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetLinkBoxApi">

            <template #titleImage="{ row }">
                <el-image :preview-src-list="[row.titleImage]" :preview-teleported="true" style="width: 50px; height: 50px"
                    :src="row.titleImage" />
            </template>

            <template #modeTypeStr="{ row }">{{ row.modeTypeStr === 1 ? '无限盲盒模式类型' : '一番赏盲盒模式类型' }}</template>
            <template #boxStatus="{ row }">
                <div class="balanceType"
                    :style="{ color: boxStatusType[row.boxStatus].color, backgroundColor: boxStatusType[row.boxStatus].bgk }">
                    {{ boxStatusType[row.boxStatus].text }}
                </div>
            </template>
            <template #classifyName="{ row }">{{ row.classifyName }}</template>
            <template #action="{ row }">
                <el-button v-if="!row.pick" @click="pickFn(row)">选择</el-button>
                <el-button v-else @click="reverseFn(row)" type="primary">选中</el-button>
            </template>
        </PageTable>
    </el-card>
</template>

<script setup>

import { reactive, ref, defineComponent, defineExpose } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { GetLinkBoxApi } from "@/api";
import { GetArticleLabelApi } from "@/api/Article";


defineComponent({
    components: {
        FormTable,
        PageTable
    }
})

const parameter = reactive({
    boxTitle: null,
    modeType: null,
    classifyId: null
})

//上架状态
const boxStatusType = {
    1: {
        text: '上架',
        color: '#409EFF',
        bgk: '#ECF5FF'
    },
    2: {
        text: '下架',
        color: '#F56C6C',
        bgk: '#FEF0F0'
    }
}
const positionType = ref([])

async function GetArticleLabel() {
    const res = await GetArticleLabelApi(1)
    res.data.forEach(item => {
        item.label = item.labelName
        item.value = +item.labelId
    })
    positionType.value = res.data
}
GetArticleLabel()

const formList = ref([
    {
        type: 'input',
        label: '盲盒名称',
        code: 'boxTitle',
    },

    {
        type: 'select',
        label: '盲盒分类',
        options: positionType,
        code: 'modeType',
    },
    {
        type: 'select',
        label: '玩法类型',
        options: [
            { label: '无限盲盒模式类型', value: 1 },
            { label: '一番赏盲盒模式类型', value: 2 },
        ],
        code: 'balanceType',
    },
    {
        type: 'select',
        label: '上架状态',
        options: [
            { label: '上架', value: 1 },
            { label: '下架', value: 2 },
        ],
        code: 'boxStatus',
    },
])
const column = [
    { label: '盲盒名称', prop: 'boxTitle' },
    { label: '盲盒图片', slots: 'titleImage' },
    { label: '盲盒类型', slots: 'classifyName' },
    { label: '玩法分类', slots: 'modeTypeStr' },
    { label: '商品价格', prop: 'price' },
    { label: '上架状态', slots: 'boxStatus' },
    { label: '操作', slots: 'action' },
]



// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.username = null
    parameter.phoneNumber = null
    parameter.balanceType = null
    parameter.createTimeStart = null
    parameter.createTimeEnd = null
    parameter.createTime = []
    tableRef.value.refresh(true)
}

const Pickid = ref()
let type = 4
//选中
function pickFn(row) {
    row.modeTypeStr === 1 ? type = 5 : type = 4
    Pickid.value = row.boxId
    row.pick = true
}
//反选
function reverseFn(row) {
    Pickid.value = ''
    row.pick = false
}

defineExpose({ Pickid, type })


</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}
</style>